import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import { ElSelect,ElPagination,ElInput } from "element-plus";
const moment = require('moment');

// element-plus css
import 'element-plus/dist/index.css'
// 全局css
import '@/assets/css/global.css'
// 分页组件
import Pagination from '@/components/Pagination/index.vue';
import locale from 'element-plus/dist/locale/zh-cn.mjs'
// 引入路由守卫
import "@/permission";
// icon
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 自定义的重置组件
import ResetButton from './components/commons/ResetButton.vue'
import ColumnSetting from "./components/commons/ColumnSetting.vue";
// 导入系统常量配置
import systemConstant from '@/constant/system'
import globalMethod from '@/constant/globalMethod'
const app = createApp(App);
// 绑定为全局函数
globalMethod(app)
// 定义全局对象
app.config.globalProperties.globalObject = {};
// 绑定全局变量, 访问globalObject.systemName
for (let key in systemConstant) {
  app.config.globalProperties.globalObject[key] = systemConstant[key];
}
app.config.globalProperties.moment = moment;
// 组件默认值设置
// 是否将下拉列表插入至 body 元素, 原默认值true, 但页面放大之后下拉框失效了
ElSelect.props.teleported.default = false;
// 理由同上
ElPagination.props.teleported.default = false;

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

// vue全局注册,使用的时候直接用this.$xxx即可, 例如this.$store
app
  .use(store)
  .use(router)
  .use(ElementPlus, {
    locale,
    size: "small", // 设置全局组件大小
  })
  .mount("#app");

// 全局组件挂载
// 分页组件
app.component("Pagination", Pagination);
app.component("ResetButton", ResetButton);
app.component("ColumnSetting", ColumnSetting);

// 自定义全局权限判断指令
app.directive("permission", (el, bunding) => {
  const { value } = bunding; // value是vue页面使用自定义指令时传过来的数组
  // 这里的user是在登陆页面，登陆成功后获取的菜单权限, 其中包括按钮, 这里只处理按钮权限,菜单的权限在路由中处理
  const muneList = store.state.menuList;
  if (value && value instanceof Array && value.length > 0) {
    const hasPermission = value.some((permissionCode) => {
      return muneList.some((item) => {
        return item.rightsCode = permissionCode;
      });
    });
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  } else {
    throw new Error("请设置操作权限标签值");
  }
});
// 使用全局混入
app.mixin({
  mounted(el){
    // 添加事件监听到window
    //window.addEventListener('keyup', this.globalKeyUp);
  },
  methods: {
    /**
     * 检查事件是否来自于input
     * 如果是, 条件处理规则: 去除首尾空格, 但无法做到响应式,需要在请求拦截器中处理参数
     * @param {*} event 事件对象
     */
    // globalKeyUp(event) {
    //   // input, textarea 输入框
    //   if (event.target.tagName.toLowerCase() == 'input' || event.target.tagName.toLowerCase() == 'textarea') {
    //     event.target.value = event.target.value.trim();
    //   }
    // }
  }
})
